<template>
  <div>
    <el-row>
      <el-col :span="15">
        <el-form
         :model="formData" 
        ref="elForm"
         :rules="rules"
           class="form-body medias-txt"
           label-suffix="："
         label-width="160px">
          <!-- <el-form-item label="所属广告公司：" prop="companyName">
          <el-input 
            v-model=" formData.companyName"
            autocomplete="off"
            placeholder="请输入广告公司名称"
             :style="{ width: '100%' }"
          ></el-input>
        </el-form-item> -->
          <el-form-item label="物料名称" prop="name">
            <el-input
              v-model="formData.name"
              autocomplete="off"
              placeholder="请输入物料名称"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <!--  -->
          <el-form-item label="文字内容" prop="txt">

            <div class="txt-edit">
              <div class="edit-btn-group">
   <el-button  plain @click="changeStyle('font-weight')">B</el-button>
   <el-button style="font-style: italic" plain @click="changeStyle('font-style')">I</el-button>
   <el-button  plain @click="changeStyle('text-decoration')" style="text-decoration: underline">U</el-button>

   <el-select v-model="style.fontSize" @change="changeSize" placeholder="字体大小">
    <el-option
      v-for="item in fontSizeOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <span style="float: left">{{ item.label }}</span>
      <span :style="'float: right; color: #8492a6; font-size:'+item.value ">{{ item.value }}</span>
    </el-option>
  </el-select>
   <el-color-picker v-model="style.color" @change="changeColor"></el-color-picker>
              </div>
     <div class="el-textarea" style="width:100%">
     <textarea autocomplete="off"
      rows="8"
      v-model="formData.txt"
      placeholder="请输入内容" 
      class="el-textarea__inner"
      :style="contentStyle"></textarea>
      <!---->
      </div>         
    <!--  -->
            </div>
            <!--  -->
          </el-form-item>
          <!--  -->
          <el-form-item label="悬停文字设置" prop="activeStyle">
          </el-form-item>
          <!--  -->
          <el-form-item label="点击链接" prop="linkurl">
            <el-input
              v-model="formData.linkurl"
              autocomplete="off"
              placeholder="请输入点击链接"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
          <!--  -->
          <el-form-item label="目标窗口" prop="target">
            <el-radio-group v-model="formData.target" size="medium">
              <el-radio
                v-for="(item, index) in targetOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <!--  -->
          <el-form-item label="展现监控链接" prop="trackurl">
            <el-input
              v-model="formData.trackurl"
              placeholder="请输入展现监控链接"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <!--  -->
          <el-form-item size="large" class="form-submit-panel">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">关闭</el-button>
          </el-form-item>
          <!--  -->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['mediasRow'],
  data() {
    return {
      formData: {
        id:0,
        name: "",      
        type: "txt",
        txt:"",
        activeStyle: {},
        contentStyle:{},
        linkurl: "",
        target: 1,
        trackurl: "",
      },
      loading: false,
      style:{ 
        fontSize:"",
        color:"#dfdfdf",
      },
      activeStyle:{
      //   "font-weight":"normal",
      //  "font-style":"normal",
      //  "font-size":"14px",
      //  "font-color":"#222222",
      //  "text-decoration":"none",
      },
      contentStyle:{
       "font-weight":"normal",
       "font-style":"normal",
       "font-size":"14px",
       "font-color":"#222222",
       "text-decoration":"none",
      //  "width":"100%"
       }, //广告内容的textarea样式
      rules: {
        name: [
          {
            required: true,
            message: "物料名称不能为空",
            trigger: "change",
          },
        ],
        target: [
          {
            required: true,
            message: "目标窗口不能为空",
            trigger: "change",
          },
        ],
        trackurl: [],
      },
      targetOptions: [
        {
          label: "新窗口",
          value: 1,
        },
        {
          label: "原窗口",
          value: 2,
        },
      ],
      fontSizeOptions:[
        { label: "12像素", value:"12px"},
        { label: "13像素", value:"13px"},
        { label: "14像素", value:"14px"},
        { label: "15像素", value:"15px"},
        { label: "16像素", value:"16px"},
        { label: "18像素", value:"18px"},
        { label: "20像素", value:"20px"},
        { label: "24像素", value:"24px"},
      ]
    };
  },
  created:function() {
       if(!this.row  || !this.row.hasOwnProperty("id")){ return;}
           // 修改是不是被类型的数据不渲染
      if(this.row.type != 'txt') { return; }
      //
         //处理 content
       var content =  this.row['content'] ;
       this.row['txt'] = content['txt'];
       this.row['conentStyle'] = content['style'];
       this.row['activeStyle'] = content['activeStyle'];
       this.contentStyle = content['style'];
       for(var key in this.formData){
         if( this.row[key]){
              this.formData[key] = this.row[key];
         }
       }
      
     
  },
  computed:{
     row: function(){
       
       return this.mediasRow
     }
  },
  methods: {
    // 改变广告内容的字体 样式
    changeStyle( key ){
      if(key == 'font-weight')
         this.contentStyle[ key ] =  this.contentStyle[ key ] =='bold'? 'normal': 'bold';
      if(key == 'font-style')
         this.contentStyle[ key ] =  this.contentStyle[ key ] =='italic'? 'normal': 'italic'; 
      if(key == 'text-decoration')
         this.contentStyle[ key ] =  this.contentStyle[ key ] =='none'? 'underline': 'none';         
    },
    changeColor( color ){
      this.contentStyle['color'] = color;
    },
    changeSize( size){
      //console.log(size)
      this.contentStyle['font-size'] = size;
    },
    submitForm() {
      
      this.formData['contentStyle']  = this.contentStyle;
      this.formData['activeStyle']  = this.activeStyle;
      

      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        
      // 表单处于loading状态 
      this.loading = true;
        // console.log(this.formData)
        //  提交数据到接口，更新和新建通过 formData.id > 0 来区别
         PlaceAPI.createMedias(this.formData).then((data)=>{
            this.loading = false;
            this.$message({ message: data.msg, type: "success" });
            // 触发关闭Drawer 侧滑层 关闭
            this.formData.id = data.value;
            // 添加成功返回 data.vaule = 物料id；
            this.$emit("onclosedrawer",{ from: 'submit',row: this.formData})
         })

      });
    },
    resetForm() {
        this.$emit("onclosedrawer",{ from: ''})
    },
  },
};
</script>
